<template>
	<view class="tablet">
		<u-toast ref="uToast" />
		<view class="tablet_img" @click="gotoScanQid">
			<image src="https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/qidShow.png" mode="aspectFill"></image>
		</view>
		<view class="title-names" v-if="qid==''">
			<!-- <text v-if="qid==''" class="vue-number-names">请扫描平板学习账号二维码</text> -->
			<view style="width: 90%;">step1:请在<text>平板电脑端</text>打开个人信息页面的[绑定学情中心]</view>
			<view style="width: 90%;">step2:点击下面扫一扫,对准上一步<text>平板电脑中</text>的学情账号二维码进行绑定;</view>
		</view>
		<view class="vue-input box box-pack-between">
			<input v-model="qid" placeholder="请输入13位QID" />
			<view class="scanCode" @click="gotoScanQid">
				<image src="https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/scan.png" mode=""></image>
			</view>
		</view>
		<view class="vue-button">
			<button type="button" class="button" @click="getbindQid">绑定学习账号</button>
		</view>
	</view>
</template>


<script>
import { bindParentQid } from '../../api/myEquipment'
	export default {
		data() {
			return {
				qid: ''
			}
		},
		methods: {
			//扫码
			gotoScanQid() {
				uni.scanCode({
					success: res => {
						this.qid = res.result
					}
				})
			},
			getbindQid() {
				bindParentQid({
					qid: this.qid,
					userId: uni.getStorageSync("userId")
				}).then(res => {
					this.$refs.uToast.show({
						title: res.msg,
						icon: false,
						type: 'success',
					})
					setTimeout(() => {
					    let pages = getCurrentPages(); //获取所有页面栈实例列表
					    let prevPage = pages[pages.length - 3]; //上一页页面实例
					    uni.navigateBack({ //uni.navigateTo跳转的返回，默认1为返回上一级
					      delta: 2,
					      success:(event)=>{
					        prevPage.$vm.getParentQidControl();  // getData 是自己对应的方法名
					      }
					    });
					  }, 500)
				}).catch(err => {
					this.$refs.uToast.show({
						title: err.msg,
						icon: false,
						type: 'error'
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tablet {
		width: 100%;
		height: 100vh;
		// background-image: -webkit-linear-gradient(90deg, #4b74e6 0%, #8a56e9 100%);
		background-color: #FFFFFF;
		color: #FFFFFF;

		image {
			height: 100%;
			width: 100%;
		}

		.tablet_img {
			position: absolute;
			left: 50%;
			top: 35%;
			transform: translate(-50%, -50%);
			width: 438rpx;
			height: 297rpx;
		}

		.title-names {
			height: 30rpx;
			margin: auto;
			position: absolute;
			width: 100%;
			top: 55%;
			text-align: center;
			font-size: 24rpx;
			line-height: 50rpx;
			letter-spacing: 2rpx;
			color: #000000;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}

		.vue-input {
			height: 100rpx;
			margin: auto;
			margin-top: 30px;
			width: 90%;
			left: 5%;
			position: absolute;
			bottom: 160rpx;
			line-height: 100rpx;
			border-radius: $uni-border-radius-lg;
			font-size: 32rpx;
			background-color: #e2e2e2;
			line-height: 60rpx;
			color: #333333;
			letter-spacing: 2rpx;
			overflow: hidden;

			input {
				height: 100rpx;
				border: none;
				background-color: #e2e2e2;
				color: #333333;
				padding-left: 20rpx;
			}

			.scanCode {
				padding: 20rpx;
				width: 100rpx;
			}
		}

		.vue-button {
			position: absolute;
			height: 100rpx;
			bottom: 40rpx;
			width: 90%;
			left: 5%;
			border: none;
			margin: auto;
			overflow: hidden;
			text-align: center;

			.button {
				height: 100rpx;
				margin: 0 auto;
				line-height: 100rpx;
				font-size: 36rpx;
				overflow: hidden;
				background-color: #4880ff;
				letter-spacing: 4rpx;
				border: none;
				border: 2rpx solid #4880ff;
				border-radius: $uni-border-radius-lg;
				color: #FFFFFF;
			}
		}
	}
</style>